require('../less/startTraining.less')
document.ready(function () {
    //获取元素节点
    let videoBox = document.getElementById('videoBox') //视频播放
    let current = document.getElementById('current') //当前页面
    let total = document.getElementById('total') //总页面
    let title = document.getElementById('title') //当前标题
    let prevPage = document.getElementById('prevPage') //跳转到上一页
    let stop = document.getElementById('stop') //点击停止
    let nextPage = document.getElementById('nextPage') //跳转到下一页
    let progess = document.getElementById('progess') //进度条
    let mask = document.getElementById('mask') //进度条
    let conTrain = document.getElementById('conTrain') //进度条
    let endBtn = document.getElementById('endBtn') //进度条
    let index = 0 //定义一个变量保存数据
    let timeId  //定义一个变量来保存时间
    //获取本地数据
    let frData = JSON.parse(localStorage.getItem('frData'))
    let videoLength = frData.length
    let courseId=location.search.split('=')[1];
    // console.log(frData);
    // console.log(frData[2].videoUrl);
    //自动播放
    function autoplay() {
        videoBox.src = 'http://139.9.177.51:8099' + frData[index].videoUrl;
        current.textContent = index + 1; //当前页数
        total.textContent = videoLength; //总页数
        title.textContent = frData[index].title //当前标题
        videoBox.play()  //播放
    }
    autoplay()
    // 自动换视频
    videoBox.addEventListener('ended', function () {
        index++
        if (index > videoLength-1) return;
        else {
            autoplay()
        }

    })

    //点击跳转到上一个视频
    prevPage.addEventListener('click', function () {
        index--
        if (index > videoLength - 1) return;
        else {
            
            autoplay()
        }
    })

 //点击跳转到下一个视频
 nextPage.addEventListener('click', function () {
    index++
    if (index > videoLength - 1) {
        return;
        index=videoLength-1
    }
    else {     
        autoplay()
    }
})
progessChange()
//进度条
function progessChange(){
    timeId=setInterval(function(){
//获取当前时间
let cTime=videoBox.currentTime 
//总时间
let tTime=videoBox.duration
// console.log(tTime/cTime);
progess.style.width=(cTime/tTime)*document.body.clientWidth+'px'
 },10)

}
//点击暂停,显示蒙版层
stop.addEventListener('click',function(){
    videoBox.pause()
    mask.style.display='flex'
})

//点击继续,蒙版隐藏
conTrain.addEventListener('click',function(){
    videoBox.play()
    mask.style.display='none'
})
// 点击结束,页面跳转
endBtn.addEventListener('click',function(){

    window.location.href='./courseList.html'
})


})